// Created by wangliang on 2025/6/19.

import 'package:flutter/material.dart';
import 'package:flutter_app_demo/base/color/common_color.dart';
import 'package:flutter_app_demo/base/widget/gradient_button.dart';
import 'package:flutter_app_demo/pages/login/login_page_view_model.dart';
import 'package:mvvm_plus/mvvm_plus.dart';

class LoginPage extends ViewWidget<LoginPageViewModel> {
  LoginPage({super.key}) : super(builder: () => LoginPageViewModel());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(height: MediaQuery.of(context).padding.top + 88),
            _buildPhoneInputWidget(),
            _buildCodeWidget(),
            _buildLoginBtnWidget(),
          ],
        ),
      ),
    );
  }

  Widget _buildPhoneInputWidget() {
    return Container(
      margin: const EdgeInsets.only(top: 30, left: 37.5, right: 37.5),
      decoration: BoxDecoration(
        color: const Color(0xFFF5FAFF),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: SizedBox(
              height: 44,
              child: TextFormField(
                style: TextStyle(fontSize: 15, color: CommonColor.std001),
                controller: viewModel.phoneEditController,
                keyboardType: TextInputType.phone,
                decoration: const InputDecoration(
                    hintText: '请输入手机号码',
                    hintStyle: TextStyle(fontSize: 15, color: Color(0xFF939699)),
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.only(left: 8, right: 8, top: -4)),
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _buildCodeWidget() {
    return Container(
      margin: const EdgeInsets.only(top: 10, left: 37.5, right: 37.5),
      child: Row(
        children: [
          Expanded(child: _buildCodeInputWidget()),
          Container(
            width: 95,
            height: 44,
            margin: const EdgeInsets.only(left: 10),
            child: GradientButton(
              disable: viewModel.getCaptchaBtnDisable,
              onTap: () => viewModel.getCaptcha(),
              bgRadius: 8,
              width: 95,
              gradient: const LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                colors: [Color(0xFFF5FAFF), Color(0xFFF5FAFF)],
              ),
              child: Text(
                viewModel.remainingSecondsStr,
                style: const TextStyle(
                  fontSize: 15,
                  color: Color(0xff905300),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCodeInputWidget() {
    return Container(
      decoration: BoxDecoration(color: const Color(0xFFF5FAFF), borderRadius: BorderRadius.circular(8)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: SizedBox(
              height: 44,
              child: TextFormField(
                style: TextStyle(fontSize: 15, color: CommonColor.std001),
                controller: viewModel.codeEditController,
                keyboardType: TextInputType.number,
                onChanged: (value) => viewModel.onCodeChanged(value),
                decoration: const InputDecoration(
                    hintText: '请输入短信验证码',
                    hintStyle: TextStyle(fontSize: 15, color: Color(0xFF939699)),
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.only(left: 8, right: 8, top: -4)),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildLoginBtnWidget() {
    return Container(
      margin: const EdgeInsets.only(top: 20, left: 37.5, right: 37.5),
      child: GradientButton(
        onTap: () => viewModel.doLogin(),
        bgRadius: 8,
        child: const Text(
          '验证码登录',
          style: TextStyle(
            fontSize: 17,
            fontWeight: FontWeight.w500,
            color: Color(0xFF905300),
          ),
        ),
      ),
    );
  }
}
